<template>
	
	<div class="app">
		   <lg-preview></lg-preview>
		<div class="mui-content">
			<div class="mui-content-padded">
				<h2>{{imginfo.title}}</h2>
				<span>{{imginfo.add_time | time("YYYY-MM-DD")}}   {{imginfo.click}}次点击  </span>
				
				<div class="img9" >
					<li class="list" v-for="(item,index) in img " :key="index" >
						<img :src="item" alt=""    v-preview="item" />
					</li>
					
				</div>
				
				
				
				<p v-html="imginfo.content"> 
					
				</p>
			</div>
		</div>
		
		<comments :artid="comid"></comments>
	</div>
	
</template>

<script>
	import  commit  from "../../kits/commit.js"
	import comments from "../puclicson/comment.vue"
	export default{
		data(){
			return{
				comid:0,
				img:[],
				imginfo:{}
			}
		},
		created(){
			this.comid = this.$route.params.id 
			this.getimg(this.$route.params.id)
			this.getart(this.$route.params.id)
		},
		methods:{
			getart(newid){
				var url = commit.api + "/api/getimageInfo/"+newid;
				this.$http.get(url).then(res=>{
					this.imginfo = res.body.message[0];
				},res=>{
					console.log("数据获取失败")
				})
			},
			getimg(newid){
				var url = commit.api + "/api/getthumimages/"+newid;
				this.$http.get(url).then(res=>{
					let temp = res.body.message;
					let img = this.img
					temp.forEach(function(item){
						img.push(item.src)
					})
					this.img= img
				
				},res=>{
					console.log("数据获取失败")
				})
			}
			
		},
		components:{
			comments
		}
		
		
		
		
	}
</script>

<style scoped>
	.mui-content{
		background-color: #fff;
	}
	.mui-content-padded h2{
		color: #007AFF;
		font-size: 16px;
	}
	.mui-content-padded span{
		color: #007AFF;
	}
	.img9{
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: center;
		margin: 10px 0;
	}
	.img9 li {
		width: 30%;
		margin-left: 9px;
	list-style: none;
	} 
	.img9 li img{
		width: 100%;
	}
	
	.lg-preview-wrapper[data-v-634fe614]{
		margin-top: -50px;
	}
	
</style>